<p>This rule raises an issue when text elements have a color contrast ratio below WCAG AA standards: less than 4.5:1 for normal text or less than 3:1
for large text (18pt+ or 14pt+ bold).</p>
<h2>Why is this an issue?</h2>
<p>Color contrast is essential for web accessibility. When text doesn’t have enough contrast against its background, it becomes difficult or
impossible for users to read.</p>
<p>Users with visual impairments, including color blindness, low vision, or age-related vision changes, rely on sufficient contrast to distinguish
text from backgrounds. Poor contrast also affects readability in challenging conditions like bright sunlight or low-quality displays.</p>
<p>The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure content is accessible to the widest possible audience.
WCAG AA compliance requires:</p>
<ul>
  <li> Normal text: minimum 4.5:1 contrast ratio </li>
  <li> Large text (18pt or larger, or 14pt bold or larger): minimum 3.1 contrast ratio </li>
</ul>
<p>These ratios are calculated using the relative luminance of colors, which accounts for how the human eye perceives different colors'
brightness.</p>
<h3>What is the potential impact?</h3>
<p>Poor color contrast creates barriers for users with visual impairments and can make your application non-compliant with accessibility standards
like WCAG AA. This may result in legal issues in jurisdictions with accessibility requirements, exclude users from accessing your content, and create
a poor user experience for everyone in suboptimal viewing conditions.</p>
<h2>How to fix it</h2>
<p>Increase the contrast by using darker text on light backgrounds or lighter text on dark backgrounds. Use online contrast checkers to verify your
color combinations meet WCAG standards. To check your contrast as you make your color choices, use a tool such as WebAIM’s <a
href="https://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>.</p>
<h3>Code examples</h3>
<h4>Noncompliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
.text {
  color: #777777; /* Light gray text */
  background-color: #ffffff; /* White background */
  /* Contrast ratio: 4.48:1 - fails WCAG AA for normal text */ // Noncompliant
}
</pre>
<h4>Compliant solution</h4>
<pre data-diff-id="1" data-diff-type="compliant">
.text {
  color: #595959; /* Darker gray text */
  background-color: #ffffff; /* White background */
  /* Contrast ratio: 7.0:1 - passes WCAG AA */
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://webaim.org/resources/contrastchecker">Color contrast checker</a> </li>
  <li> WCAG 2.2 Contrast (Minimum) - <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum">Official WCAG guidelines for minimum color contrast
  requirements</a> </li>
  <li> WebAIM Contrast Checker - <a href="https://webaim.org/resources/contrastchecker/">Online tool to check color contrast ratios and WCAG
  compliance</a> </li>
  <li> MDN Color Contrast - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast">Mozilla
  documentation on color contrast for web accessibility</a> </li>
</ul>
<h3>Standards</h3>
<ul>
  <li> WCAG 2.2 - 1.4.3 Contrast (Minimum) - <a href="https://www.w3.org/TR/WCAG22/#contrast-minimum">Web Content Accessibility Guidelines for minimum
  color contrast</a> </li>
  <li> WCAG 2.2 - 1.4.6 Contrast (Enhanced) - <a href="https://www.w3.org/TR/WCAG22/#contrast-enhanced">Enhanced contrast requirements for WCAG AAA
  compliance</a> </li>
</ul>
